<template>

    <div class="col">
        <div class="row mt" style="align-items: flex-start;">
            <PumpView />
            <ValveView class="ml"/>
            <HeaterView class="ml"/>
            <DrainWater class="ml"/>
        </div>
        <div class="row mt" style="align-items: flex-start;">
            <BoilerView/>
            <div class="col ml" style="align-items: flex-start;">
                <HeatSensorView/>
                <div class="row mt">
                    <State/>
                    <Flow class="ml"/>
                </div>
            </div>
        </div>
        <div class="row mt" style="align-items: flex-start;">
            <TankHeat/>
            <ReserveHeat class="ml"/>
            <Draw class="ml"/>
            <Nozzle class="ml"/>
        </div>
        <div class="row mt" style="align-items: flex-start;">
            <Clean/>
            <Cooking class="ml"/>
            <Action class="ml"/>
        </div>
    </div>

</template>

<script setup lang="ts">
import PumpView from '../components/heat/PumpView.vue';
import ValveView from '../components/heat/ValveView.vue';
import HeaterView from '../components/heat/HeaterView.vue';
import HeatSensorView from '../components/heat/HeatSensorView.vue';
import BoilerView from '../components/heat/BoilerView.vue';
import TankHeat from '../components/heat/TankHeat.vue';
import ReserveHeat from '../components/heat/ReserveHeat.vue';
import Draw from '../components/heat/Draw.vue';
import Flow from '../components/heat/Flow.vue';
import DrainWater from '../components/heat/DrainWater.vue';
import State from '../components/weight/State.vue';
import Nozzle from '../components/heat/Nozzle.vue';
import Clean from '../components/heat/Clean.vue';
import Cooking from '../components/heat/Cooking.vue';
import Action from '../components/heat/Action.vue';

</script>
